<!-- 菜单管理 -->
<template>
  <div>
    <pageHeader
      :title="title"
      :formList="formList"
      :breadCrumb="breadCrumb"
      :show-back="true"
    >
    </pageHeader>
    <div class="role-permission">
      <a-space class="search-box">
        <div>
          <a-space size="large">
            <div>
              <a-space>
                <div style="font-weight: bold">菜单名称</div>
                <a-input-search
                  search-button
                  :style="{ width: '220px' }"
                  v-model="searchName"
                  @change="search"
                  placeholder="菜单名称"
                />
              </a-space>
            </div>

            <div>
              <a-space>
                <div style="font-weight: bold">状态</div>
                <a-select
                  v-model="searchState"
                  @change="search"
                  :style="{ width: '120px' }"
                >
                  <a-option :value="1">启用</a-option>
                  <a-option :value="2">停用</a-option>
                </a-select>
              </a-space>
            </div>
            <a-button type="outline" @click="reset">
              <template #icon> <icon-refresh /> </template>重置</a-button
            >
          </a-space>
        </div>
        <a-space>
          <a-button type="primary" @click="addMenuList">
            <template #icon>
              <icon-plus />
            </template>
            <template #default>新增</template>
          </a-button>
          <a-button status="success">
            <template #icon>
              <icon-download />
            </template>
            <template #default>导入</template>
          </a-button>
          <a-button status="warning">
            <template #icon>
              <icon-upload />
            </template>
            <template #default>导出</template>
          </a-button>
        </a-space>
      </a-space>
    </div>

    <div>
      <tableTurn
        style="margin-top: 10px"
        :tableData="GetRoleData"
        :args="args"
        row-key="id"
        ref="tableTurnRef"
      >
        <a-table-column :width="80" align="center">
          <template #title> 序号 </template>
        </a-table-column>
        <a-table-column
          v-for="item in columns"
          :key="item.code"
          :title="item.title"
          :data-index="item.code"
          align="center"
        >
          <template v-if="item.code === 'bu'" #cell="{ record }">
            {{ record.department.name }}
          </template>
          <!-- 状态item -->
          <template v-else-if="item.code === 'status'" #cell="{ record }">
            <div v-if="record.status === 1" class="y_statusBox">
              <span>启用</span>
            </div>
            <div v-else class="n_statusBox">
              <span>停用</span>
            </div>
          </template>

          <template v-else-if="item.code === 'handle'" #cell="{ record }">
            <a-button @click="Modstate(record)" type="text">{{
              record.status === 2 ? '启用' : '停用'
            }}</a-button>
            <a-button @click="compile(record.id)" type="text">编辑</a-button>
            <a-popconfirm
              @ok="deletePosition(record.id)"
              content="确认删除?"
              type="error"
            >
              <a-button type="text">删除</a-button>
            </a-popconfirm>
          </template>
        </a-table-column>
        <a-table-column :width="300" align="center">
          <template #title> 操作 </template>
          <template #cell>
            <a-space>
              <a-button type="text">修改</a-button>
              <a-button type="text">新增</a-button>
              <a-button type="text" status="danger">删除</a-button>
            </a-space>
            <!-- {{ rowIndex + 1 }} -->
          </template>
        </a-table-column>
      </tableTurn>
    </div>
    <addMenu
      v-model:visible="modelVisible"
      :formList="formList"
      @addMenuEmit="addMenuEmit"
    ></addMenu>

    <!-- <div class="role-permission">
        <roleList class="role-list"></roleList>
        <roleDetail class="role-detail"></roleDetail>
      </div> -->
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { GetRouters, addMenus } from '@/api/menu';
  import addMenu from './add-menu/index.vue';
  //   import roleList from './components/role-list/index.vue';
  //   import roleDetail from './components/role-detail/index.vue';
  const expandedKeys = ref([]);
  let formList = reactive({
    parentId: null,
    menuName: '',
    component: '',
    visible: 1,
    path: '',
    menuType: '',
    orderNum: 1,
    status: 1,
  });
  const searchState = ref();
  const searchName = ref();
  const title: string = '菜单管理';
  const breadCrumb: string[] = ['首页', '菜单管理'];
  const modelVisible = ref(false);
  const tableTurnRef = ref();
  const GetRoleData = async () => {
    try {
      let data: any = {};
      if (searchName.value) data.name = searchName.value;
      if (searchState.value) data.state = searchState.value;
      const res = await GetRouters({ ...data });
      let replaceStr = JSON.parse(
        JSON.stringify(res)
          .replace(/"node"/g, '"children"')
          .replace(/"menuId"/g, '"id"')
      );
      return replaceStr;
    } catch (error: unknown) {
      console.log(error);
    }

    // roleList.value = res;
  };

  // 重置按钮
  const reset = () => {
    searchName.value = '';
    searchState.value = '';
    tableTurnRef.value.loadData();
  };

  const columns = [
    {
      title: '菜单名称',
      code: 'menuName',
    },
    // {
    //   title: '权限字符',
    //   code: 'roleKey',
    // },
    {
      title: '状态',
      code: 'status',
    },
    // {
    //   title: '创建时间',
    //   code: 'createAt',
    // },
  ];

  const addMenuList = () => {
    modelVisible.value = true;
  };

  const addMenuEmit = async (data: any) => {
    await addMenus({ ...data });
    tableTurnRef.value.loadData();
  };

  const search = () => {
    tableTurnRef.value.loadData();
  };
  // const addMenu = () => {};
</script>

<style scoped lang="less">
  .role-permission {
    padding: 10px;
    // display: flex;
    .search-box {
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
    }
  }
</style>
